<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>订单01</title>
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

</head>

<body>

<!--table工具栏-->
<script type="text/html" id="orderTools">
    <div class="layui-inline">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData" onclick="showOrderOne()">查询详情</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData" onclick="deleteOrderOne()">删除订单</button>
        </div>
        <div class="layui-inline">
            <form class="layui-form layui-inline" action="" onsubmit="false" id="queryUserForm">
                <div class="layui-inline">
                    <label class="layui-form-label">订单号</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="orderNum" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">商品</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="gname" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">种类</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="cname" class="layui-input">
                    </div>
                </div>
                <div class="layui-input-inline">
                    <input type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="searchUserBtn"
                           onclick="searchOrder()" value="搜索">
                </div>
            </form>
        </div>
    </div>
</script>

<!--table表格-->
<table id="orderTable"></table>

<!--弹出框-->
<!--详细信息-->
<div id="orderMsg" style="display: none; padding: 5px;margin: 10px 10px">
    <div class="layui-form" action="" onsubmit="false" lay-filter="orderMsgForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="orderNum" class="layui-input" disabled="disabled" name="orderNum">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">快递单号</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="expressNum" class="layui-input" disabled="disabled" name="expressNum">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="buildTime" class="layui-input" disabled="disabled" name="buildTime">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">支付时间</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="paymentTime" class="layui-input" disabled="disabled"
                           name="paymentTime">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">成交时间</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="dealTime" class="layui-input" disabled="disabled" name="dealTime">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品名字</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="gname" class="layui-input" disabled="disabled" name="gname">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="cname" class="layui-input" disabled="disabled" name="cname">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">成交价格</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="transactionPerice" class="layui-input" disabled="disabled"
                           name="transactionPerice">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">买家</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="bname" class="layui-input" disabled="disabled" name="bname">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">卖家</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="vname" class="layui-input" disabled="disabled" name="vname">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">手续费</label>
                <div class="layui-input-inline">
                    <input type="tel" lay-filter="charges" class="layui-input" disabled="disabled" name="charges">
                </div>
            </div>
        </div>
    </div>
    </form>
</div>

</body>

<script>
    layui.use(['form', 'table'], function () {
        let table = layui.table,
            $ = layui.$,
            form = layui.form;

        window.deleteOrderOne =()=>{
            let orders = table.checkStatus('orderTable').data;
            if (orders.length != 1) {
                layer.msg("请选择一条数据");
                return;
            }
            let oid = orders[0].oid;
            var flage = 0;
            $.ajax({
                url: "../web-order/order/deleteOrder",
                method: "post",
                data: {
                    oid: oid,
                    flage: flage
                },
                success: function (result) {
                    if (result.code == 200) {
                        alert("删除成功");
                        location.reload();
                    } else {
                        alert("系统错误，请联系管理员")
                        location.reload();
                    }
                }
            })
        }


        /*订单详情*/
        window.showOrderOne = () => {
            let orders = table.checkStatus('orderTable').data;
            if (orders.length != 1) {
                layer.msg("请选择一条数据");
                return;
            }
            form.val("orderMsgForm", orders[0]);
            layer.open({
                type: 1
                , content: $('#orderMsg')
                , title: "订单信息"
                , btn: ['确定']
                , area: ['1000px', '600px']
                , btnAlign: 'c' //按钮居中
                , shade: 0.5 //不显示遮罩
                , success: function (layero, index) {
                    // 添加form标识
                    layero.addClass('layui-form');
                    // 将保存按钮改变成提交按钮
                    layero.find('.layui-layer-btn0').attr({
                        'lay-filter': 'orderMsg',
                        'lay-submit': ''
                    });
                }
                , yes: function () {
                    layer.close(layer.index);
                }
            });

        }


        /*搜索框*/
        window.searchOrder = () => {
            let orderNum = $("[name='orderNum']").val();
            let gname = $("[name='gname']").val();
            let cname = $("[name='cname']").val();
            table.reload('orderTable', {
                where: {
                    orderNum: orderNum,
                    cname: cname,
                    gname: gname,
                },
                done: function (res, curr, count) {
                    $("[name='orderNum']").val(orderNum);
                    $("[name='gname']").val(gname);
                    $("[name='cname']").val(cname);
                },
            });
        }

        /*表格渲染*/
        table.render({
            elem: "#orderTable",
            id: "orderTable",
            url: "../web-order/order/showOrder",
            method: "get",
            cols: [[
                {type: 'checkbox'},
                {field: "orderNum", title: "订单号"},
                {field: "gname", title: "商品"},
                {field: "cname", title: "种类"},
                {field: "transactionPerice", title: "成交价"},
                {field: "charges", title: "手续费"},
                {field: "buildTime", title: "创建时间"},
                {field: "paymentTime", title: "支付时间"},
                {file: "dealTime", title: "成交时间"},
                {
                    file: "flage", title: "订单状态", templet: function (data) {
                        switch (data.flage) {
                            case 1:
                                return "<div><span style='color: #93D1FF;'>未支付</span></div>";
                            case 2:
                                return "<div><span style='color: red'>已过期</span></div>";
                            case 3:
                                return "<div><span style='color: #5b5b5b'>已完成</span></div>";
                            case 4:
                                return "<div><span style='color: #0c1923'>支付成功</span></div>";
                        }
                    }
                }
            ]],
            page: true,
            toolbar: '#orderTools',
            defaultToolbar: [],
            height: $(document).height() - $('#orderTable').offset().top - 20,
        })
    })
</script>
</html>